<template>
    <div class="container">
        <div class="content">
            <div class="wode">
                <div class="iconcontent" @click='showLogin'>
                    <el-avatar 
                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                    :size="60"
                    shape="square"
                    />
                </div>
            </div>
            <div class="wode">
                <div class="iconcontent" @click="navigateTo('Bizhi')">
                    <div class="icon">
                        <img src="">

                    </div>
                </div>
            </div>
            <div class="wode">
                <div class="iconcontent">
                    <div style="width: 100%;height: 100%;align-items: center;">
                        <img style="width: 100%;height: 60%;" src="">

                    </div>
                </div>
            </div>
            <div class="wode">
                <div class="iconcontent" @click="navigateTo('Wenjian')">
                    <div class="icon">
                        <img src="">

                    </div>
                </div>
            </div>
            <div class="wode">
                <div class="iconcontent" @click="navigateTo('Shequ')">
                    <div class="icon">
                        <img src="">
                    </div>
                </div>
            </div>
          
        </div>
    </div>
</template>
<style lang="scss" scoped>
.container{
    width: 80px;
    height: auto;
    bottom: 100px;
    right: 20px;
    position: absolute;
    border-radius: 15px 0px  0px 15px;
    z-index: 99;
    background-color: rgb(223, 223, 223);

    .content{
        

        .wode{
            margin-top: 10px;
            overflow: hidden;
            border-radius: 2%;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 70px;
            min-width: 70px;
            .iconcontent{
                width: 100%;
                height: 100%;
                justify-content: center;
                    align-items: center;
                    display: flex;
                .icon{
                    
                    width: 100%;
                    height: 100%;
                    justify-content: center;
                    align-items: center;
                    display: flex;
                    img{
                        width: 70%;
                        
                    }
                }
            }

        }
        .wode:hover{
            background-color: rgb(248, 196, 196);
        }

    }
}

@media (max-width:calc(1600px - 1px)) {
    .container{

        display: none;
    }
}

</style>

<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter();
import { ref,defineEmits  } from 'vue';
import { useStore } from 'vuex'; // 导入 useStore 钩子
const store = useStore(); // 使用 useStore 钩子获取 store 实例
const emit = defineEmits(['update']);
function updateParent(value: boolean) {
    // 通过 emit 触发 'update' 事件，并传递 value 参数
    emit('update', value);
}

// 使用映射的 action
const useAuth=() =>{
  if(store.state.LoginState.isLoggedIn){
    updateParent(false);
  }else{
    updateParent(true);

  }
    
}

const showLogin = () => {
  useAuth();
};

const navigateTo = (page : string) => {
    try{
        console.log(page)
            router.push({ name: page });
    }finally{

}
};</script>